<template>
    <div class="chart-container">
        <div :id="id" :style="{ height, width }" />
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, onUnmounted, watch } from "vue";

const props = defineProps({
    id: {
        type: String,
        required: true,
    },
    height: {
        type: String,
        default: "200px",
    },
    width: {
        type: String,
        default: "100%",
    },
    value: {
        type: Number,
        required: true,
    },
    color: {
        type: String,
        default: "#409EFF",
    },
});

let chart: echarts.ECharts | null = null;

const initChart = () => {
    const chartDom = document.getElementById(props.id);
    if (!chartDom) return;

    chart = echarts.init(chartDom);
    const option = {
        series: [
            {
                type: "gauge",
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false,
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        color: props.color,
                    },
                },
                axisLine: {
                    lineStyle: {
                        width: 15,
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 24,
                    offsetCenter: [0, -20],
                    formatter: "{value}%",
                    color: "inherit",
                },
                data: [{ value: props.value }],
            },
        ],
    };

    chart.setOption(option);
};

const updateChart = () => {
    if (!chart) return;
    chart.setOption({
        notMerge: true,
        series: [
            {
                type: "gauge",
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false,
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        color: props.color,
                    },
                },
                axisLine: {
                    lineStyle: {
                        width: 15,
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 24,
                    offsetCenter: [0, -20],
                    formatter: "{value}%",
                    color: "inherit",
                },
                data: [{ value: props.value }],
            },
        ],
    });
};

watch(
    () => props.value,
    () => {
        updateChart();
    }
);

onMounted(() => {
    initChart();
    window.addEventListener("resize", () => {
        chart?.resize();
    });
});

onUnmounted(() => {
    if (!chart) return;
    chart.dispose();
    chart = null;
});
</script>

<style scoped>
.chart-container {
    padding: 10px;
}
</style>